<template>
  <section>
    <el-row>
      <el-col :span="24">
        <!--顶部操作按钮-->
        <el-space class="top-btns">
          <el-button type="success" size="small" @click="onSubmit">刷新</el-button>
        </el-space>

        <!--搜索表单-->
        <el-form :inline="true" size="small">

        </el-form>
        <!--数据表格-->
        <el-table :data="tableData" border size="small">
          <el-table-column prop="type_name" label="类型" align="center"></el-table-column>
          <el-table-column prop="title" label="标题" align="center"></el-table-column>
          <el-table-column prop="update_at" label="更新时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)" size="small"><el-icon><EditPen/></el-icon></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="编辑" center v-model="dialogFormVisible" width="1200">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="类型" prop="type_name">
          <el-input v-model="form.type_name" readonly></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <Toolbar
            style="border: 1px solid #ccc;border-bottom: none;"
            :editor="editorRef"
            mode="default"
          />
          <Editor
            style="height: 400px;width: 100%; border: 1px solid #ccc;"
            v-model="form.content"
            :defaultConfig="editorConfig"
            mode="default"
            @onCreated="handleCreated"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave" :loading="editLoading">保存</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>
<script setup>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { ElMessage } from 'element-plus'
  import { ref,shallowRef } from "vue";
  import func from '@/common/func'
  const criteria = ref({})
  const tableData = ref([])
  const dialogFormVisible = ref(false)
  const editLoading = ref(false)
  const formRef = ref(null)
  const form = ref({})
  const rules = ref({
    title: [
      {required: true, message: '请输入标题', trigger: 'blur'},
    ],
    content: [
      {required: true, message: '请输入内容', trigger: 'blur'},
    ],
  })

  const editorRef = shallowRef()
  const editorConfig = ref({
    MENU_CONF: {
      uploadImage: {
        server: func.uploadUrl('/ajax/upload'),
        fieldName: 'file',
        customInsert(res, insertFn) {
          insertFn(res.data.url)
        },
      },
      uploadVideo: {
        server: func.uploadUrl('/ajax/upload'),
        fieldName: 'file',
        customInsert(res, insertFn){
          // 返回视频地址，编辑器会自动插入视频
          insertFn(res.data.url)
        },
      }
    }
  })
  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }

  let criteria_default = {}
  let listUrl = '/article/articleList'
  let editUrl = '/article/articleEdit'

  for (let i in criteria.value) {
    if (criteria_default[i] === undefined) {
      criteria_default[i] = criteria.value[i];
    }
  }
  loadData();

  function onSubmit() {
    loadData();
  }

  function handleEdit(row) {
    form.value = {
      type_name: row.type_name,
      type: row.type,
      title: row.title,
      content: row.content,
    }
    setTimeout(() => {
      form.value.content = row.content
    }, 100)
    dialogFormVisible.value = true
  }
  function handleSave() {
    formRef.value.validate((valid) => {
      if (!valid) {
        return false
      }
      editLoading.value = true;
      func.request(editUrl, form.value).then(res => {
        editLoading.value = false;
        if (res.code === 1) {
          dialogFormVisible.value = false
          ElMessage({message: res.msg,type: 'success'})
          loadData()
        }
      });
    });
  }

  function loadData() {
    var pdt = {};
    func.request(listUrl, pdt).then(res => {
      if (res.code === 1) {
        tableData.value = res.data.list;
      }
    });
  }

</script>

<style lang="scss">

</style>
